<template>
    <div class="mk-query-container " style="height: 100%;">
        <el-card shadow="hover" :body-style="{ paddingBottom: '0' }" v-if="isHeader">
            <slot name="header"></slot>
        </el-card>
        <div class="mk-query-container-table" style="margin-top: 5px">
            <slot></slot>
        </div>
    </div>
</template>
<script lang="ts" setup>
// 查询界面的容器, header里面放查询条件, body里面放查询结果
defineOptions({
    name: 'MkQueryContainer'
})
const props = defineProps({
    isHeader: {
        type: Boolean,
        default: true
    }
})
</script>

<style lang='scss' scoped>
.mk-query-container {
    display: flex;
    flex-direction: column;

    .mk-query-container-table {
        flex: 1;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        :deep(.el-table) {
            flex: 1;
        }

        :deep(.el-pagination) {
            margin-left: auto;
        }
    }
}
</style>
